<template>
  <div class="home">
    <el-card
      :body-style="{
        padding: '20px',
        minHeight: 'calc(100vh - 100px)',
      }"
    >
      <div class="title">vue2.x-element ui案例合集</div>
      <div class="demoList">
        <div
          class="demoItem"
          v-for="item in demoData"
          :key="item.id"
          @click="goLink(item.routesName)"
        >
          <el-button>{{ item.name }}</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      demoData: [
        {
          id: 1,
          name: "step步骤条",
          routesName: "/step",
        },
        {
          id: 2,
          name: "form表单校验",
          routesName: "/formValidate",
        },
        {
          id: 3,
          name: "时间选择控件",
          routesName: "/formTime",
        },
        {
          id: 9,
          name: "自定义日历控件",
          routesName: "/calendar",
        },
        {
          id: 4,
          name: "图片放大预览",
          routesName: "/imgViewer",
        },
        {
          id: 5,
          name: "图片上传",
          routesName: "/imgUpload",
        },
        {
          id: 6,
          name: "键盘的大写状态",
          routesName: "/keyDown",
        },
        {
          id: 7,
          name: "echart图表",
          routesName: "/echartDemo",
        },
        {
          id: 18,
          name: "动态加载echart",
          routesName: "/echartList",
        },
        {
          id: 8,
          name: "table",
          routesName: "/table",
        },
        {
          id: 10,
          name: "数组无限滚动",
          routesName: "/load",
        },
        {
          id: 11,
          name: "关键词高亮",
          routesName: "/brightKeyword",
        },
        {
          id: 12,
          name: "图片拖拽交换位置",
          routesName: "/dragImg",
        },
        {
          id: 13,
          name: "腾讯地图",
          routesName: "/txMap",
        },
        {
          id: 23,
          name: "腾讯地图标点",
          routesName: "/txMapMorePoint",
        },
        {
          id: 14,
          name: "textarea",
          routesName: "/textarea",
        },
        {
          id: 15,
          name: "树状结构table",
          routesName: "/tableTree",
        },
        {
          id: 16,
          name: "打印预览",
          routesName: "/print",
        },
        {
          id: 17,
          name: "checkboxTable",
          routesName: "/checkboxTable",
        },
        {
          id: 18,
          name: "tableMore",
          routesName: "/tableMore",
        },
        {
          id: 19,
          name: "checkbox",
          routesName: "/checkbox",
        },
        {
          id: 20,
          name: "多个判断语句",
          routesName: "/ifElse",
        },
        {
          id: 21,
          name: "鼠标右键自定义事件",
          routesName: "/contextmenu",
        },
        {
          id: 22,
          name: "@成员功能",
          routesName: "/sendBox",
        }, {
          id: 23,
          name: "聊天记录效果",
          routesName: "/scroll",
        },
      ],
    };
  },
  methods: {
    goLink(routesName) {
      let routes = this.$router.resolve({
        path: routesName,
        query: {},
      });
      window.open(routes.href, "_blank");
    },
  },
};
</script>
<style scoped lang="scss">
.home {
  .title {
    font-size: 20px;
    text-align: center;
  }
  .demoList {
    margin-top: 50px;
    .demoItem {
      font-size: 16px;
      margin: 0 20px 20px 0;
      float: left;
    }
  }
}
</style>
